{% extends 'base.html' %}

{% block page_header %}
    <h1 class="pt-3">Topics</h1>
{% endblock %}

{% block content %}
    <div class="mt-4">
        <table class="table table-striped align-middle">
            <thead class="table-light">
            <tr>
                <th>Topic Name</th>
                <th>Create Time</th>
                <th>Owner</th>
                <th></th>
            </tr>
            </thead>
            <tbody id="topics"></tbody>
        </table>
    </div>
    <div id="delModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">提示</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="del">
                    <input type="hidden">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button onclick="del_topic()" class="btn btn-primary" data-bs-dismiss="modal">删除</button>
                </div>
            </div>
        </div>
    </div>
    <div id="editModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改主题名称</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="edit">
                    <div class="input-group">
                        <span class="input-group-text">主题名称</span>
                        <input type="hidden">
                        <input type="text" class="form-control" name="name" style="box-shadow: none">
                        <div class="invalid-feedback">主题名称不能为空或空串</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button onclick="mod_topic()" class="btn btn-primary" data-bs-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        function showDelModal(id, name) {
            $('#del>input[type="hidden"]').val(id);
            $('#del>p').remove();
            $('#del').append(
                `<p>您确认要删除 <b>${name}</b> 这个主题名称吗？</p>`
            )
            $('#delModal').modal("show");
        }

        function showEditModal(id, name) {
            $('#edit input[type="hidden"]').val(id);
            $('#edit input[type="text"]').val(name);
            $('#editModal').modal("show");
        }
    </script>
    <script>
        function add_topic() {
            const topicName = $('#topicName>input');
            if ($.trim(topicName.val()).length > 0) {
                $.ajax({
                    type: "POST",
                    url: "{% url 'learning_logs:add_topic' %}",
                    data: {"name": $.trim(topicName.val())},
                    success: function (data) {
                        if (data.code === 0) {
                            list_topic();
                            $('input[name="name"]').val('');
                        } else {
                            $('#alert').show();
                            $('#alert>strong').text('待添加的主题已存在');
                        }
                    }
                })
            } else {
                topicName.removeClass('is-valid is-invalid');
                topicName.addClass("is-invalid");
            }
        }

        function del_topic() {
            $.ajax({
                type: "DELETE",
                url: "{% url 'learning_logs:del_topic' %}",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({'id': $('#del>input[type="hidden"]').val()}),
                success: function () {
                    list_topic();
                }
            })
        }

        function mod_topic() {
            const topicId = $('#edit input[type="hidden"]');
            const topicName = $('#edit input[type="text"]');
            if ($.trim(topicName.val()).length > 0) {
                $.ajax({
                    type: "POST",
                    url: "{% url 'learning_logs:mod_topic' %}",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({
                        'id': topicId.val(),
                        'name': $.trim(topicName.val())
                    }),
                    success: function () {
                        list_topic();
                    }
                })
            } else {
                topicName.removeClass('is-valid is-invalid');
                topicName.addClass("is-invalid");
            }
        }

        function list_topic(keywords = '') {
            $.get("{% url 'learning_logs:list_topic' %}",
                {'keywords': keywords},
                function (data) {
                    $('#topics>tr').remove();
                    $.each(data["topics"], function (i, topic) {
                        $('#topics').append(
                            `<tr>
                                    <td>${topic.name}</td>
                                    <td>${topic.datetime}</td>
                                    <td>${topic.owner}</td>
                                    <td class="text-center">
                                        <a href="javascript:void(0);" class="btn btn-outline-success btn-sm" role="button">详情</a>
                                        <a href="javascript:void(0);" onclick="showEditModal(${topic.id}, '${topic.name}')" class="btn btn-outline-primary btn-sm">编辑</a>
                                        <a href="javascript:void(0);" onclick="showDelModal(${topic.id}, '${topic.name}')" class="btn btn-outline-danger btn-sm">删除</a>
                                    </td>
                                  </tr>`
                        );
                    });
                }
            );
        }

        $('#searchForm').keyup(function (event) {
            event.preventDefault();
            list_topic($.trim($('#search').val()));
        })
    </script>
    <script>
        $(function () {
            list_topic();
            $.ajaxSetup({headers: {"X-CSRFToken": getCookie("csrftoken")}});
        })
    </script>
{% endblock %}